<!doctype html>
<html>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>添豆注册</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        body {
            background: url("__STATIC__/image/webRegister/bg.png");
        }

        .icon {
            width: 90%;
            margin-top: 20%;
            margin-left: 5%;
        }

        .loginbox {
            width: 90%;
            position: relative;
            /* height: 40%; */
            padding-bottom: 10px;
            background: white;
            margin-left: 5%;
            border-radius: 12px;
        }

        .loginbox-top {
            width: 100%;
        }

        .telbox {
            width: 90%;
            height: 30px;
            position: relative;
            background: rgba(245, 245, 245, 1);
            margin-left: 5%;
            border-radius: 15px;

        }

        .telbox-icon {
            width: 20px;
            margin: 5px;
            float: left;
        }

        .input-tel {
            width: 70%;
            float: left;
            height: 20px;
            padding: 5px;
            border: none;
            background: rgba(245, 245, 245, 1);
        }

        .mart10 {
            margin-top: 10%;
        }

        .inpputcode {
            width: 100%;
            position: relative;
        }

        .codebox {
            width: 60%;
            height: 30px;
            background: rgba(245, 245, 245, 1);
            margin-left: 5%;
            border-radius: 15px;

        }

        .input-code {
            width: 73%;
            float: left;
            height: 20px;
            padding: 5px;
            border: none;
            background: rgba(245, 245, 245, 1);
        }

        .getcode {
            width: 25%;
            position: absolute;
            right: 5px;
            top: 0;
        }

        .getcodes {
            width: 25%;
            position: absolute;
            right: 5px;
            top: 3px;
            display: none;
        }

        .reg {
            margin-top: 40px;
            margin-left: 10%;
            width: 80%;
        }

        .disable {
            pointer-events: none;
            color: #666;
        }

        .shadow {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            z-index: 2;
            display: none;
            background: rgba(0, 0, 0, .5);
        }

        #loader4 {
            z-index: 99999;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            width: 50px;
            height: 50px;
            display: none;
            animation: loader-4 1s ease-in-out alternate infinite;
        }


        .heart:before {
            position: absolute;
            left: 11px;
            content: "";
            width: 50px;
            height: 80px;
            transform: rotate(45deg);
            /*    background-color: rgb(230, 6, 6);*/
            border-radius: 50px 50px 0 0;
        }

        .heart:after {
            position: absolute;
            right: 11px;
            content: "";
            width: 50px;
            height: 80px;
            /*    background-color: rgb(230, 6, 6);*/
            transform: rotate(-45deg);
            border-radius: 50px 50px 0 0;
        }

        @keyframes loader-4 {
            0% {
                transform: scale(0.2);
                opacity: 0.5;
            }

            100% {
                transform: scale(1);
                opacity: 1;
            }
        }

        .shadow {
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            background: black;
            opacity: .3;
        }

        .msg {
            width: 100%;
            text-align: center;
            position: absolute;
            top: 16px;
        }

        .name {
            color: rgba(41, 179, 138, 1);
        }

    </style>
</head>
<body>

<!-- loading部分 -->
<div class="shadow" id="shad">
</div>
<img id="loader4" class="heart" src="__STATIC__/image/webRegister/tiandou.png" alt="" />

<img class="icon" src="__STATIC__/image/webRegister/icon.png" alt="">
<div class="loginbox">
    <img class="loginbox-top" src="__STATIC__/image/webRegister/top1.png" alt="">
    <div class="msg">
        <div class="name" id="names"></div>
        <!--<div class="tels" id="tels"></div>-->
    </div>
    <div class="telbox">
        <img class="telbox-icon" src="__STATIC__/image/webRegister/tel.png" alt="">
        <input class="input-tel" placeholder="请输入手机号码" maxlength="11" type="text" id="telval" />
    </div>
    <div class="inpputcode">
        <div class="codebox mart10">
            <img class="telbox-icon" src="__STATIC__/image/webRegister/code.png" alt="">
            <input class="input-code" placeholder="请输入验证码" maxlength="4" type="text" id="codeval" />
        </div>
        <img id="getcodeimg" class="getcode" src="__STATIC__/image/webRegister/getcode.png" alt="">
        <div class="getcodes" id="btn">发送验证码</div>
    </div>
    <img id="registerbtn" class="reg" src="__STATIC__/image/webRegister/reg.png" alt="">
</div>

</body>
</html>
<script src="__STATIC__/js/webRegister/jquery.js">
</script>
<script type="text/javascript">
    var locationUrl = 'https://app.lktehui.com/index/';
    var downloadUrl = 'Index/download';
    // 获得传参
    function getValueFromHref(key) {
        let url = window.location.href;
        // let url = "www.baidu.com?agentID=146";

        console.log(url)
        let qparts = url.split("?");

        if(qparts.length === 1)
            return "";
        else {
            let query = qparts[1];
            let vars = query.split("&");
            let value = "";
            for(var i = 0, j = vars.length; i < j; i++) {
                let parts = vars[i].split("=");
                if(parts[0] === key) {
                    value = parts[1];
                    break;
                }
            }
            value = decodeURI(value);
            value.replace(/\+/g, " "); // Convert "+"s to " "s

            return value;
        }
    }

    var agentID = getValueFromHref("agentID");
    var shad = document.getElementById('shad');
    var loader = document.getElementById('loader4');

    var names = document.getElementById('names');
    // var tels = document.getElementById('tels');
    if (agentID) {
        shad.style.display = "block";
        loader.style.display = "block";
        var data = {};
        data['agentID'] = agentID;
        post("Index/getAgentInfo", data, function(res) {
            shad.style.display = "none";
            loader.style.display = "none";
            if (res.code == 1) {
                console.log(res)
                names.innerHTML = "推荐码: " + res.data.mobile
                // tels.innerHTML = +res.data.mobile
            } else {
                alert(res.msg)
            }
        })
    } else {
        shad.style.display = "block";
        alert('无效二维码');
    }


    var oBtn = document.getElementById('btn');
    var oImg = document.getElementById('getcodeimg');
    var flag = true;
    oImg.addEventListener("click", function() {
        var telval = document.getElementById('telval').value;
        if (!(/^[1]([3-9])[0-9]{9}$/.test(telval))) {
            alert("手机号码有误，请重填");
            document.getElementById('telval').value = "";
            return;
        }
        shad.style.display = "block";
        loader.style.display = "block";
        var data = {};
        data['mobile'] = telval;
        post("Index/registeredSendMobileCode", data, function(res) {
            shad.style.display = "none";
            loader.style.display = "none";
            if (res.code == 1) {
                var time = 60;
                oBtn.classList.add('disable');
                oBtn.innerText = '已发送';
                if (flag) {
                    oImg.style.display = "none";
                    oBtn.style.display = "block";
                    flag = false;
                    var timer = setInterval(() => {
                        time--;
                        oBtn.innerText = time + ' 秒';
                        if (time === 0) {
                            clearInterval(timer);
                            oBtn.innerText = '重新获取';
                            oBtn.style.display = "none";
                            oImg.style.display = "block";
                            oBtn.classList.remove('disable');
                            flag = true;
                        }
                    }, 1000)
                }
            } else {
                alert(res.msg)
            }
        })

    });
    document.getElementById('registerbtn').onclick = function() {

        var telval = document.getElementById('telval').value;
        if (!(/^[1]([3-9])[0-9]{9}$/.test(telval))) {
            alert("手机号码有误，请重填");
            document.getElementById('telval').value = "";
            return;
        }
        var codeval = document.getElementById('codeval').value;
        if (codeval.length != 4) {
            alert("验证码有误，请重填");
            document.getElementById('codeval').value = "";
        }

        shad.style.display = "block";
        loader.style.display = "block";
        var data={};
        data['mobile']=telval;
        data['code']=codeval;
        data['agentID']=agentID;
        post('Index/registered',data,function(res){
            shad.style.display = "none";
            loader.style.display = "none";
            if(res.code==1){
                console.log(res)
                // alert(res.msg+"获得"+res.data.bean+"添豆")
                alert(res.msg)
                window.location.href= locationUrl + downloadUrl;
            }else {
                alert(res.msg)
            }
        })
    }

    function post(url, obj, successCallback) {
        let str = 'appData=' + JSON.stringify(obj);
        var data = {
            "appData": obj,
        };
        data = JSON.stringify(data);
        $.ajax({
            type: "POST",
            url: locationUrl + url,
            data: data,
            success: function(msg) {
                successCallback(msg);
            },
            error: function(err) {
                console.log(err)
            }
        });

    }
</script>
